import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

class detailcom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);
    var topPadding = mediaQuery.padding.top;
    var mediaWidth = mediaQuery.size.width;

    return Scaffold(
      body: Padding(
        padding: EdgeInsets.fromLTRB(0, topPadding, 0, 0),
        child: Column(
          children: [
            Expanded(
              child: Container(
                width: mediaWidth,
                margin: const EdgeInsets.fromLTRB(20, 10, 20, 20),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(60),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.5),
                      blurRadius: 20,
                      offset: const Offset(5, 5),
                    ),
                  ],
                  gradient: const LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      Color(0xffd5a982),
                      Color(0xfff1e3d6),
                      Color(0xffffffff),
                    ],
                  ),
                ),
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Container(
                          padding: const EdgeInsets.fromLTRB(20, 10, 0, 0),
                          child: IconButton(
                            onPressed: () => Navigator.pop(context),
                            icon: const Icon(
                              Icons.arrow_back,
                              color: Colors.white,
                            ),
                          ),
                        ),
                        const SizedBox(width: 60), // 添加间距（如果需要）
                        const Text(
                          '暗恋对象',
                          style: TextStyle(
                            fontSize: 15,
                            color: Colors.black, // 设置文本样式
                          ),
                        ),
                      ],
                    ),
                    Container(
                      height: 450,
                      child: ListView(
                        padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
                        children: [
                          // 假设我们有一个消息列表，每个消息是一个Map
                          // 这里我们用一个硬编码的列表作为示例
                          for (var i = 0; i < 20; i++) // 假设有5条消息
                            ChatMessageItem(
                              message: '这是消息内容 $i', // 消息文本
                              isSender: i % 2 == 0, // 假设发送者和接收者交替出现
                              // 其他可能需要的属性，如头像、时间戳等
                            ),
                        ],
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 10.0, vertical: 8.0), // 设置输入框的内边距
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white, // 输入框的背景色
                        border: const Border(
                          top: BorderSide(
                              color: Colors.black, width: 0.5), // 可选的顶部边框
                        ),
                      ),
                      child: const TextField(
                        decoration: InputDecoration(
                          border: InputBorder.none, // 移除输入框的默认边框
                          contentPadding: EdgeInsets.fromLTRB(
                              10.0, 0.0, 10.0, 10.0), // 设置文本内容周围的内边距
                        ),
                        // 其他TextField属性，如onChanged、onSubmitted等
                      ),
                      // 设置Container的高度来限制TextField的高度
                      constraints: const BoxConstraints(
                        minHeight: 10.0, // 设置最小高度
                        maxHeight: 30.0, // 设置最大高度，与minHeight相同以固定高度
                      ),
                      width: double.infinity, // 使其尽可能宽，但受限于父容器
                    ),
                  ],
                ),
              ),
            ),
            // 这里可以添加更多的Widget，例如详细信息内容
          ],
        ),
      ),
    );
  }
}

class ChatMessageItem extends StatelessWidget {
  final String message;
  final bool isSender;
  ChatMessageItem({required this.message, required this.isSender});
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment:
          isSender ? MainAxisAlignment.end : MainAxisAlignment.start,
      children: [
        if (!isSender) // 如果是接收者的消息，显示头像（可选）
          Container(
            width: 40,
            height: 40,
            decoration: const BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    image: NetworkImage(
                        "https://gd-hbimg.huaban.com/c046f4f7f9bf38d2b93ab146138126142e8d14931e930-adLhbn_fw236"))),
          ),

        const SizedBox(width: 8), // 头像和文本之间的间距

        Expanded(
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
            decoration: BoxDecoration(
              color: isSender
                  ? const Color.fromARGB(255, 220, 177, 136)
                  : const Color.fromARGB(255, 230, 198, 198),
              borderRadius: BorderRadius.only(
                topLeft: isSender ? Radius.zero : const Radius.circular(10),
                topRight: isSender ? const Radius.circular(10) : Radius.zero,
                bottomLeft: const Radius.circular(10),
                bottomRight: const Radius.circular(10),
              ),
            ),
            child: Text(
              message,
              style: const TextStyle(
                color: Colors.black, // 文本颜色为白色
              ),
            ),
          ),
        ),
        if (isSender) // 如果是发送者的消息，显示头像（可选）并添加右侧间距
          Container(
            width: 40,
            height: 40,
            decoration: const BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    image: NetworkImage(
                        "https://q4.itc.cn/q_70/images03/20240515/18f3c7131e344b6888f3d13c6570931a.jpeg"))),
          ),
        // 如果需要显示时间戳，可以在这里添加
      ],
    );
  }
}
